<template>
	<view class="container">
		<view class="header boxS">
			<view class="h-left">
				选择
				<br />
				我的交易身份
			</view>
			<template v-if="goInPage == 'buycar'">
				<view @click="maiState = 1" :class="[maiState == 1 ? 'active' : '', 'wid440', 'h-mid']" style="margin-left: 26rpx;">
					<view><i-icon icon="iconwoshimaijia" type="single" size="54rpx" color="#333"></i-icon></view>
					<view>我是买家</view>
				</view>
			</template>
			<template v-else-if="goInPage == 'index'">
				<view v-if="identity == 'CarStore'" @click="maiState = 1" :class="[maiState == 1 ? 'active' : '', 'h-mid']" style="margin-left: 26rpx;">
					<view><i-icon icon="iconwoshimaijia" type="single" size="54rpx" color="#333"></i-icon></view>
					<view>我是买家</view>
				</view>
				<view v-if="identity == 'CarStore' || identity == 'Factory'" @click="maiState = 2" :class="[maiState == 2 ? 'active' : '', identity == 'Factory' ? 'wid440' : '', 'h-mid']">
					<view><i-icon icon="icondianpu" type="single" size="56rpx" color="#333"></i-icon></view>
					<view>我是卖家</view>
				</view>
			</template>
		</view>
		<view class="userData boxS">
			<view class="u-head">
				<view>请确认与以下用户交易</view>
				<view class="u-head-l">
					<text style="margin-right: 10rpx;">确认</text>
					<u-switch color="#41cb05" v-model="confirm1" size="40" active-color="#41CB05"></u-switch>
				</view>
			</view>
			<view class="u-two">用户信息</view>
			<view class="u-shop flex" v-if="goInPage=='index'">
				<view class="u-shop-left " >请选择用户</view>
				<view class="width-78" @click="goInPage=='index'?goNext('/pages_order/selectUser/selectUser'):nogo">
					<view class="width-100  flex">
						<view class='width-95 u-text-right' v-if="!dealUserInfostatus">请选择用户信息</view>
						<view class='width-95 flex flex-ai-c' v-else >
								<view class="headImg" v-if="dealUserInfo.headPortrait">
									<image :src="dealUserInfo.headPortrait" mode=""></image>
								</view>
								<view class="inline-block">
									<text style="margin-right: 20rpx;">{{ dealUserInfo.truename }}</text>
										{{ dealUserInfo.mobile }}
									<view>{{ dealUserInfo.store_name?dealUserInfo.store_name: dealUserInfo.companyname | cutString(45)}}</view>
								</view>
						</view>
						<view class="" style="position: absolute;right: 0;top: calc(50% - 24rpx);" v-if="goInPage=='index'">
							<u-icon name="arrow-right ml-5" color="#9A9A9A" size="24rpx"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-else>
				<view class="width-100 flex pad-t-b-10 bg-fff">
					<view class="topImg" v-if="dealUserInfo.store_topimg">
						<image  :src="dealUserInfo.store_topimg" mode=""></image>
						
					</view>
					<view class="iconImg" v-else>
						<i-icon icon="iconlogo" type="single" size="140rpx" color="#cccccc"></i-icon>
					</view>
					<view class="inline-block mt-10">
						<view class="font-30 color-333 font-bold">
							{{dealUserInfo.store_name?dealUserInfo.store_name:dealUserInfo.companyname}}
						</view>
						<text style="margin-right: 20rpx;">{{ dealUserInfo.truename }}</text>
							{{ dealUserInfo.mobile }}
						<view>{{ dealUserInfo.companyname?dealUserInfo.companyname: dealUserInfo.store_name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="carData boxS">
			<view class="c-head">
				<view>请确认交易的车辆信息</view>
				<view class="c-head-l">
					<text style="margin-right: 10rpx;">确认</text>
					<u-switch color="#41cb05" v-model="confirm2" size="40" active-color="#41CB05"></u-switch>
				</view>
			</view>
			<view class="c-two">车辆信息</view>
			<view class="car-specif-item flex width-100 flex-ac-sb">
				<view class="width-24">车型/款式</view>
				<navigator class="width-78" v-if="goInPage=='index'" url="/pages_common/chooseSpecifications/chooseSpecifications?type=120">
					<view class="flex flex-ac-sb">
						<view class="width-95 pl-15">
							<view v-if="Object.keys(carConfig).length === 0" class="text-line u-text-right color-666"><text>请选择车型/款式</text></view>
							<view class="font-30 color-333" v-else>
									{{ carConfig.brandlist ? carConfig.brandlist.brand : '' }} {{ carConfig.Serieslist ? carConfig.Serieslist.carTypeName : '' }}
									{{ carConfig.Configulist ? carConfig.Configulist.name : '' }}
								<!-- </text> -->
							</view>
						</view>
						<view class=""><u-icon name="arrow-right" color="#9A9A9A" class="ml-5" size="24rpx"></u-icon></view>
					</view>
				</navigator>
				<view class="width-78 " v-else>
					{{dealcarMsg.carTypeName}}{{dealcarMsg.configurationName}}
				</view>
			</view>
			<view class="car-specif-item flex flex-ac-sb">
				<view class="width-24">外观/内饰</view>
				<view class="text-line width-78 color-333 flex flex-ac-sb">
					<view class="width-95 pl-15">
						<view  v-if="exteriorColor.colorList" >
							<view  class="flex" @click="goInPage==='index'?selectExteriorInterior:colorShow=true">
							<view :style="{ background: exteriorColor.colorList.outerColour.colorCoding }" class="iconcolor"></view>
							{{ exteriorColor.colorList.outerColour.color }} /{{ exteriorColor.colorList.inColour.color }}
							<view v-if="exteriorColor.colorList.inColour.neiColor.length == 1" :style="{ background: exteriorColor.colorList.inColour.colorCoding }" class="iconcolor"></view>
							<view v-else class="iconcolor"><view class="iconcolor2" v-for="(it, i) in exteriorColor.colorList.inColour.neiColor" :key="i" :style="{ background: it }"></view></view>
						</view>
						</view>
						<view class="text-line u-text-right color-666" v-else >
						 <view class="" v-if="goInPage==='index'" @click="selectExteriorInterior">
						 	请选择外观/内饰
						 </view>	
						 <view class="" v-else @click="colorShow=true">
						 	请选择外观/内饰
						 </view>
						</view>
				
						</view>
				   <view class="">
				   	<u-icon name="arrow-right" class="ml-5" color="#9A9A9A" size="24rpx"></u-icon>
				   </view>
			
				</view>
			</view>
		</view>
		<view class="b-text boxS">
			注：金额、手续、备注等信息请前往合同页填写；交易规则详 情信息请参考
			<text class="b-t" @click="goNext('/pages_common/payFlies/transactionDescription')">《交易说明》</text>
		</view>
		<view class="img1">
			<button v-if='canGoPay' @click="$u.throttle(goInContract, 1000)" class="btn hetongzhong" type="default">发起合同</button>
			<button v-else @click="$u.throttle(setToast, 1000)" class="hetong btn">发起合同</button>
		</view>
		<u-popup height="600rpx" v-if="goInPage==='buycar'" class="colorListWrap" v-model="colorShow" mode="bottom" border-radius="14"  >
		<view class="title">
			选择外观/内饰
		</view>
			
			<view class="colorList" >
				<view class="colorwrap" v-for="(it,index) in activeConfig" :key="index" @click="selectColor(it)">
					<view class="flexlist flex">
						<view :style="{ background: it.outerColour.colorCoding }" class="iconcolor" style="margin-top: 12rpx;"></view>
						<view class="font-24 s-line-text">
							{{ it.outerColour.color }}
						</view>	
					</view>
					<view class="flexlist flex">
						
						<view v-if="it.inColour.neiColor.length == 1" :style="{ background: it.inColour.colorCoding }" class="iconcolor" style="margin-top: 12rpx;"></view>
						<view v-else class="iconcolor" style="margin-top: 12rpx;">
							<view class="iconcolor2"   v-for="(it1, i) in it.inColour.neiColor" :key="i" :style="{ background: it1 }"></view>
						</view>
						<view class="width-65 font-24 s-line-text">
							{{ it.inColour.color }}
						</view>
					</view>
				 
			</view>
			</view>
			</u-popup>
	</view>
</template>

<script src="./securedTransactions.js"></script>
<style lang="scss" scoped>
@import './securedTransactions.scss';
</style>
